<template>
  <div class="yxp-word-box" id="wordBox">
    <div class="yxp-wordList-box">
      <div class="yxp-wordList-box-item">
      <div class="yxp-wordList-main">
        <div class="yxp-wordList-item list-item" v-for="(item,i) in dataList" :key="item.id" :class="{active: item.num > 0 && curIndex === i}" @click="handlePlay(item,i)">
          <div class="yxp-wordList-item-l">{{item.word}}</div>
          <div class="yxp-wordList-item-r" v-if="item.num === 2 && curIndex === i">{{item.translate}}</div>
        </div>
        </div>
      </div>
      <span
        class="yxp-wordList-page-btn btn-hover"
        id="word-list-more:btn"
        v-show="dataList.length >= 20 && !isFinished"
        @click="handleMoreClick"
        >加载更多</span
      >
    </div>
    <audio ref="audio"></audio>
  </div>
</template>
<script>
export default {
  name: 'wordList',
  props: {
    dataList: {
      curIndex: 0,
      type: Array,
      defalut: []
    }
  },
  data() {
    return {}
  },
  methods: {
    // 播放语音
    handlePlay (item, i) {
      this.curIndex = i
      let num = item.num
      num++
      if (num > 2) num = 1
      this.$set(item, 'num', num)
      let audio = this.$refs.audio
      audio.src = item.project_voice
      audio.play()
      this.dataList.map((elem,index) => {
        if (index !== i) {
          this.$set(elem, 'num', 0)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
